<template>
  <button @click="show = true">打开</button>
  <Teleport to="body">
    <div class="model" v-show="show">
      <h4>model</h4>
      <button @click="show = false">关闭</button>
    </div>
  </Teleport>
</template>
<script setup lang="ts">
import { ref } from "vue";
let show = ref(false);
</script>
<style lang="scss" scoped>
.model {
  width: 200px;
  height: 100px;
  background-color: var(--theme-bg2);;
  position: fixed;
  top: 20px;
  left: 50%;
  border-radius: var( --radius);
  transform: translateX(-50%);
  text-align: center;
}
</style>
